<template>
<div id="AddCoupon">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>新增优惠券包</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">       
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-form-item label="券包名称" :label-width="formLabelWidth" prop="bagName">
                <el-input v-model="ruleForm.bagName" maxlength="15" style="width:200px;"></el-input>
              </el-form-item>
              <div style="margin-left:50px">
                <el-button type="primary" size="small"  @click="add">添加优惠券</el-button>
                <el-table :data="tableData2" style="width: 100%;margin-top:20px;" height="250">            
                    <el-table-column
                    prop="typeName"
                    label="券类型"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="券名称"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="券说明" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.type ==1">{{scope.row.faceValue}}元</span>
                            <span v-if="scope.row.type ==2">{{Math.round(scope.row.faceValue * 10) / 100.0}}折</span>
                            <span v-if="scope.row.type ==3">{{scope.row.faceValue}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="doorsillMoneyName"
                    label="使用门槛" width="150px"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="scopeName"
                    label="适用范围" width="150px"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="有效期" width="200px">
                      <template slot-scope="scope">
                        <span v-if="scope.row.indateStart!==''||scope.row.indateEnd!=''">
                          {{(scope.row.indateStart).substring(0,10)}} 至 {{(scope.row.indateEnd).substring(0,10)}}
                        </span>  
                        <span v-if="scope.row.indateDay!=null">
                          {{scope.row.indateDay}}天
                        </span>                 
                      </template>
                    </el-table-column>
                    <el-table-column
                    prop="stateName"
                    label="状态"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="deletes2(scope.$index,scope.row)" type="text" size="small" v-has="'marketingcouponredact'">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table> 
              </div>
              <el-form-item style="padding-left: 120px;margin-top:30px;">
                <el-button type="primary"
                    size="small"
                    @click="Preservation('ruleForm')">
                    保存
                </el-button>
                <el-button type="primary"
                    size="small"
                    @click="returns" class="btn">
                    取消
                </el-button>
              </el-form-item>             
        </el-form>        
    </div>
    <!-- 添加优惠券弹出框 -->
    <el-dialog title="添加优惠券" :visible.sync="dialogVisible2">      
        <el-dropdown @command="setType">
            <span class="el-dropdown-link">
            {{typeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部类型',id:''}">全部类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'代金券',id:'1'}">代金券</el-dropdown-item>
            <el-dropdown-item :command="{title:'折扣券',id:'2'}">折扣券</el-dropdown-item>
            <el-dropdown-item :command="{title:'礼品券',id:'3'}">礼品券</el-dropdown-item>                    
            </el-dropdown-menu>
        </el-dropdown>     
        <el-input class="input" v-model="search" placeholder="券名称" clearable></el-input>
        <el-button type="primary"
            @click.native="_reset"
            size="small"
            style="width:60px">
            <i class="el-icon-search"></i>
        </el-button>
        <el-table height="500px"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @select="handleSelectionChange"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="券类型"
              width="120">
              </el-table-column>
              <el-table-column
              prop="name"
              label="券名称"
              show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="券说明" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.type ==1">{{scope.row.faceValue}}元</span>
                    <span v-if="scope.row.type ==2">{{Math.round(scope.row.faceValue * 10) / 100.0}}折</span>
                    <span v-if="scope.row.type ==3">{{scope.row.faceValue}}</span>
                </template>
              </el-table-column>
              <el-table-column
              prop="doorsillMoneyName"
              label="使用门槛" width="150px"
              show-overflow-tooltip>
              </el-table-column>
              <el-table-column
              prop="scopeName"
              label="适用范围" width="150px"
              show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="有效期" width="200px">
                <template slot-scope="scope">
                  <span v-if="scope.row.indateStart!==''||scope.row.indateEnd!=''">
                    {{(scope.row.indateStart).substring(0,10)}} 至 {{(scope.row.indateEnd).substring(0,10)}}
                  </span>  
                  <span v-if="scope.row.indateDay!=null">
                    {{scope.row.indateDay}}天
                  </span>                 
                </template>
              </el-table-column>
              <el-table-column
              prop="person"
              label="创建人"
              show-overflow-tooltip>
            </el-table-column>
        </el-table>            
    <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible2 = false">取 消</el-button> -->
        <el-button type="primary" @click="SeeSure">确 定</el-button>
        <!-- <el-button type="primary" @click="toggleSelection([tableData[1]])">测试</el-button> -->
    </div>
    </el-dialog>
</div>   
</template>
<script>
import { GetCoupon, RedactCouponPackage } from "@/public/js/saleRoom";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      pageSize: 100,
      pageNum: 1,
      total: 0,
      search: "",
      couponIds: [], //选择打钩的集合
      data_val: "",
      typeStr: "全部类型",
      formLabelWidth: "120px",
      dialogVisible2: false,
      SeeData: {},
      tableData: [],
      tableData2: [],
      tableArray: [], //记录所有打钩集合
      tableArray_id: [], //记录所有打钩id

      ruleForm: {
        bagName: "",
        array_length: ""
      },
      rules: {
        bagName: [{ required: true, message: "请输入券名称", trigger: "blur" }],
        array_length: [
          { required: true, message: "请输优惠券", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this._GetCoupon();
  },
  methods: {
    // 获取优惠券
    _GetCoupon() {
      var data = {
        bagId: "",
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type,
        search: this.search,
        state: ""
      };
      GetCoupon(data).then(res => {
        this.tableData = res.data.discountCouponList.filter(
          item => item.state == 1
        );
        this.total = res.data.total;
        let arr_1 = [];
        this.tableData.forEach(item => {
          if (this.tableArray_id.indexOf(item.id) > -1) {
            arr_1.push(item);
          }
        });
        this.tableArray = arr_1;
        this.couponIds = arr_1;
        setTimeout(() => this.toggleSelection(this.tableArray), 0);
      });
    },
    //添加优惠券
    add() {
      if (this.tableData2.length != "") {
        this.$refs.multipleTable.clearSelection();
        setTimeout(() => this.toggleSelection(this.tableData2), 0);
      }
      this.dialogVisible2 = true;
    },
    //添加优惠券保存按钮
    SeeSure() {
      this.tableData2 = this.couponIds;
      this.$refs.multipleTable.clearSelection();
      this.dialogVisible2 = false;
    },
    // 搜索
    _reset() {
      // this.pageSize = 10;
      // this.pageNum = 1;
      this._GetCoupon();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //保存
    Preservation(formName) {
      var arr = [];
      this.tableData2.forEach(i => {
        arr.push(i.id);
      });
      var data = {
        bagName: this.ruleForm.bagName,
        couponIds: arr
      };
      if (this.tableData2.length == 0) {
        this.$message({
          showClose: true,
          message: "请添加优惠券",
          type: "error"
        });
        return false;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          RedactCouponPackage(data).then(res => {
            if (res.data.errCode == 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$router.push("/index/CouponPackage");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    returns() {
      this.$router.push("/index/CouponPackage");
    },
    // 数组去重
    qc(val) {
      var hash = [];
      for (var i = 0; i < val.length; i++) {
        if (hash.indexOf(val[i]) == -1) {
          hash.push(val[i]);
        }
      }
      val = hash;
    },
    //勾选
    handleSelectionChange(val, row) {
      val.forEach(item => {
        this.tableArray_id.push(item.id);
      });
      this.couponIds = val;
      this.qc(this.couponIds);
    },
    //删除
    deletes2(index, row) {
      this.tableData2.forEach(item => {
        if (item.id == row.id) {
          this.tableData2.splice(index, 1);
          return this.tableData2;
        }
      });
      this.$refs.multipleTable.clearSelection();
      setTimeout(() => this.toggleSelection(this.tableData2), 0);
    },
    // 下拉选择
    setType(e) {
      this.search = "";
      this.type = e.id;
      e.id == 1
        ? (this.typeStr = "代金券")
        : e.id == 2
        ? (this.typeStr = "折扣")
        : e.id == 3
        ? (this.typeStr = "礼品券")
        : (this.typeStr = "全部类型");
      this._reset();
    }
  }
};
</script>
<style lang="scss">
#AddCoupon {
  .el-form {
    width: 70%;
  }
  .el-dialog {
    .input {
      width: 200px;
    }
  }
  .el-form-item__content .btn {
    background: #c8c9cc !important;
    border-color: #c8c9cc !important;
    color: #fff;
    margin-left: 142px;
  }
}
</style>
